import { Route, Switch } from "react-router-dom";
import Login from "./views/Login";
import Layout from "./layout";

function App() {
  return (
    // <Switch>
    //   <Route path={"/login"} component={Login} />
    //   {/*
    //     exact 精准匹配
    //       1. 没有设置 exact 时，只要url地址已这边 Route 的 path 配置开头，都能匹配这条 Route
    //         /admin        √
    //         /admin/a      √
    //         /admin/b      √

    //       2. 设置了 exact 时，url地址必须跟 Route 的 path 配置一样，才能匹配这条Route
    //         /admin        √
    //         /admin/a      ×
    //         /admin/b      ×

    //       PS: 如果某个 Route 有 子级路由的话，注意不要加  exact.

    //   */}
    //   <Route exact path={"/admin"} component={Layout} />
    // </Switch>

    // 如下代码，url地址为 /login 时，能渲染 Login 组件出来嘛？ 能
    // <div>
    //   <Route path={"/"} component={Layout} />
    //   <Route path={"/login"} component={Login} />
    // </div>

    // 如下代码，url地址为 /login 时，能渲染 Login 组件出来嘛？不能
    <Switch>
      <Route path={"/"} component={Layout} />
      <Route path={"/login"} component={Login} />
    </Switch>
  );
}

export default App;
